import React, { Component } from "react";
import "./Login.scss";
import axios from "axios";
import { NavBar, Icon, Toast, TabBar } from "antd-mobile";

class Login extends Component {
  constructor(props) {
    super(props);
    this.contentRef = React.createRef();
    this.state = {
      // TabBar部分状态
      selectedTab: "redTab",
      hidden: false,
      fullScreen: false,
      //导航栏右侧图标是否被点击
      isSelect: false,
    };
  }
  /* 受控表单 */
  state = {
    username: "",
    password: "",
  };

  // 显示tabbar
  tabbarBlockClick = () => {
    this.setState({
      isSelect: !this.state.isSelect,
    });
  };
  //登录功能
  handleSubmit = (params) => {
    axios
      .post("http://s.linweiqin.com/api/s/loginCheck", {
        username: this.state.username,
        password: this.state.password,
      })
      .then((res) => {
        console.log(res);
        if (res.data.msg === "登录成功") {
          Toast.info("登录成功");
          let history = this.props.match.url.replace("/login/","")
          if(history === "0"){
            localStorage.setItem("loginToken", JSON.stringify(res.data.wdata));
            this.props.history.push("/my");
          }else if (history === "1") {
            localStorage.setItem("loginToken", JSON.stringify(res.data.wdata));
            this.props.history.push("/order");
          }else{
            this.props.history.push("/");
          }
        } else if (res.data.msg === "请输入正确的账号密码") {
          Toast.info("请输入正确的账号密码");
        } else if (res.data.msg === "请输入密码") {
          Toast.info("请输入密码");
        } else if (res.data.msg === "请输入正确的账号密码") {
          Toast.info("请输入正确的账号密码");
        } else {
          Toast.info("登录失败");
        }
      });
  };

  //账号
  handleUserNameChange = (e) => {
    this.setState({
      username: e.target.value,
    });
  };
  //密码
  handlePasswordChange = (e) => {
    this.setState({
      password: e.target.value,
    });
  };
  //跳转注册
  handleRegister = () => {
    this.props.history.push("/register");
    this.forceUpdate();
  };
  render() {
    return (
      <div className="yg-login">
        {/* 商品列表导航条开始 */}
        <NavBar
          mode="light"
          className="dd-cart-nav"
          icon={<Icon type="left" />}
          onLeftClick={() => window.history.go(-1)}
          rightContent={[
            <i
              className={
                this.state.isSelect === false
                  ? "iconfont icon-19"
                  : "iconfont icon-cha"
              }
              onClick={this.tabbarBlockClick}
              key={123}
            ></i>,
          ]}
        >
          当当登录
        </NavBar>
        {/* 商品列表导航条结束 */}
        {/* 商品列表tabbar开始 */}
        <div
          className={
            this.state.isSelect === false
              ? "dd-cart-tabbar"
              : "active dd-cart-tabbar"
          }
        >
          <TabBar
            // 未选中的字体颜色
            unselectedTintColor="#949494"
            // tintColor
            tintColor="#ff2d4a"
            // tabbar 背景色
            barTintColor="#eeeeee"
            hidden={this.state.hidden}
            tabBarPosition="top"
          >
            <TabBar.Item
              title="首页"
              key="index"
              // 默认展示图片
              icon={<i className="iconfont icon-main"></i>}
              // 选中后的展示图片
              selectedIcon={
                <i
                  className="iconfont icon-main"
                  style={{ color: "#ff2d4a" }}
                ></i>
              }
              selected={this.props.location.pathname === "/"}
              onPress={() => {
                this.props.history.push("/");
              }}
            >
              {this.props.location.pathname === "/" && this.props.children}
            </TabBar.Item>
            <TabBar.Item
              title="分类"
              key="category"
              icon={<i className="iconfont icon-fenleichazhao"></i>}
              selectedIcon={
                <i
                  className="iconfont icon-fenleichazhao"
                  style={{ color: "#ff2d4a" }}
                ></i>
              }
              selected={this.props.location.pathname === "/category"}
              onPress={() => {
                this.props.history.push("/category");
              }}
            >
              {this.props.location.pathname === "/category" &&
                this.props.children}
            </TabBar.Item>
            <TabBar.Item
              title="值得买"
              key="worthBuy"
              icon={<i className="iconfont icon-gouwudai"></i>}
              selectedIcon={
                <i
                  className="iconfont icon-gouwudai"
                  style={{ color: "#ff2d4a" }}
                ></i>
              }
              selected={this.props.location.pathname === "/worthBuy"}
              onPress={() => {
                this.props.history.push("/worthBuy");
              }}
            >
              {this.props.location.pathname === "/worthBuy" &&
                this.props.children}
            </TabBar.Item>
            <TabBar.Item
              title="购物车"
              key="cart"
              icon={<i className="iconfont icon-gouwuche1"></i>}
              selectedIcon={
                <i
                  className="iconfont icon-gouwuche1"
                  style={{ color: "#ff2d4a", fontSize: "20px" }}
                ></i>
              }
              selected={this.props.location.pathname === "/cart"}
              onPress={() => {
                this.props.history.push("/cart");
              }}
            >
              {this.props.location.pathname === "/cart" && this.props.children}
            </TabBar.Item>
            <TabBar.Item
              title="我的当当"
              key="my"
              icon={<i className="iconfont icon-wode"></i>}
              selectedIcon={
                <i
                  className="iconfont icon-wode"
                  style={{ color: "#ff2d4a" }}
                ></i>
              }
              selected={this.props.location.pathname === "/my"}
              onPress={() => {
                this.props.history.push("/my");
              }}
            >
              {this.props.location.pathname === "/my" && this.props.children}
            </TabBar.Item>
          </TabBar>
          {/* <Tabbar className="cart-tabbar-content"></Tabbar> */}
        </div>
        {/* 商品列表tabbar开始 */}
        <div className="zhanghaomima">
          <h4>账号密码登录</h4>
        </div>
        <div>
          <label htmlFor="">
            <i className="iconfont icon-wode"></i>
            <input
              type="text"
              name=""
              id="username"
              value={this.state.username || ""}
              onChange={this.handleUserNameChange}
              placeholder="请输入账号"
            />
          </label>
        </div>
        <div>
          <label htmlFor="">
            <i className="iconfont icon-gouwudai"></i>
            <input
              value={this.state.password || ""}
              onChange={this.handlePasswordChange}
              type="password"
              name=""
              id="password"
              placeholder="请输入密码"
              autoComplete="true"
            />
          </label>
        </div>
        <div>
          <button className="login-sub" onClick={this.handleSubmit}>
            登录
          </button>
        </div>
        <section>
          <span className="login-wjm">忘记密码？</span>
          <span className="login-reg" onClick={this.handleRegister}>
            立即注册
          </span>
        </section>
        <section>
          <i className="iconfont icon-qq-copy"></i>
          <i className="iconfont icon-zhifubao"></i>
          <i className="iconfont icon-weibo"></i>
        </section>
        <footer>
          <p>
            <span>安全问题 | </span>
            <span>登录代表您已同意</span>
            <span>《当当隐私政策》</span>
          </p>
        </footer>
      </div>
    );
  }
}

export default Login;
